<template>
  <div>
    <Card class="search-condition">
      <Row>
        <span>
          计算规则名称：
        </span>
        <Input v-model="pageModel.ruleName" placeholder="请输入" clearable style="width:200px"></Input>
        <span>
          计算规则年度：
        </span>
        <DatePicker type="year" v-model="pageModel.niandu" placeholder="请选择" clearable style="width:200px"></DatePicker>
        <span>
          赛事类型：
        </span>
        <dict code="ZGX_SSDJ" model="pageModel.kindCode" :value="pageModel.kindCode" @click="getVal"></dict>
        <Button @click="fetchListStart" type="primary" class="m-l-sm" icon="md-search">筛选</Button>
        <Button @click="reset" class="m-l-sm" icon="md-sync">重置</Button>
      </Row>
    </Card>
    <Row class="m-t-sm m-b-sm">
      <Button type="primary" @click="editModal()" icon="md-add">新增</Button>
    </Row>
    <Card>
      <Row>
        <Table :loading="loading" :columns="tableColumn" stripe border :data="tableData"></Table>
        <page-temp :total="total" :current="page.pageNo" :size="page.pageSize" @changePage="changePage"></page-temp>
        <Modal v-model="visible" width='800' :closable='false' :mask-closable='false' title="编辑">
          <Card>
            <Row>
              <Col span="17" offset="3">
              <Form ref='obj' :model="obj" :rules="ruleInline" inline :label-width='100'>
                <FormItem prop='ruleName' label="计算规则名称" style="width:100%;">
                  <Input v-model="obj.ruleName" clearable placeholder="请输入"></Input>
                </FormItem>
                <FormItem prop='niandu' label="年度" style="width:100%;">
                  <DatePicker type="year" v-model="obj.niandu" clearable placeholder="请选择" style="width:100%;"></DatePicker>
                </FormItem>
                <FormItem prop='kindCode' label="赛事类型" style="width:100%;">
                  <dict code="ZGX_SSDJ" model="obj.kindCode" :value="obj.kindCode" @click="getVal" style="width:100%;"></dict>
                </FormItem>
              </Form>
              </Col>
            </Row>
          </Card>
          <div slot="footer">
            <Button @click="cancel">取消</Button>
            <Button @click="save" class="m-l-md" type="primary">确认</Button>
          </div>
        </Modal>
      </Row>
    </Card>
  </div>
</template>
<script>
import dict from "_c/dict/dict.vue";
import dictSpan from "_c/dict/dict-span.vue";
import Api from "@/api/basic-rules";
import _ from "lodash";
const api = new Api();
export default {
  components: {
    dict,
    dictSpan
  },
  data() {
    return {
      loading: true,
      visible: false,
      total: 0,
      page: {
        pageNo: 1,
        pageSize: this.$config.PAGE_SIZE
      },
      obj: {},
      modelTemp: {},
      ruleInline: {
        ruleName: [
          { required: true, message: "请输入" },
          {
            max: this.$config.INPUT_SIZE,
            message: `最多输入${this.$config.INPUT_SIZE}个字符`
          }
        ],
        niandu: [
          {
            required: true,
            message: "请选择"
          }
        ],
        kindCode: [
          {
            required: true,
            message: "请选择"
          }
        ]
      },
      pageModel: {},
      tableColumn: [
        {
          title: "规则年度",
          key: "niandu"
        },
        {
          title: "规则名称",
          key: "ruleName"
        },
        {
          title: "赛事类型",
          key: "kindCode",
          render: (h, params) => {
            return h(dictSpan, {
              props: {
                code: "ZGX_SSDJ",
                value: params.row.kindCode
              }
            });
          }
        },
        {
          title: "操作",
          render: (h, params) => {
            let statusStr = params.row.status === "1" ? "停用" : "启用";
            let self = this;
            return h("div", [
              h(
                "Button",
                {
                  style: {
                    marginRight: "5px"
                  },
                  props: { type: "primary", size: "small" },
                  on: {
                    click: () => {
                      self.editModal(self.tableData[params.index]);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Poptip",
                {
                  props: {
                    confirm: true,
                    title: `您确定要${statusStr}这条规则吗?`,
                    transfer: true,
                    placement: "top"
                  },
                  on: {
                    "on-ok": () => {
                      self.updateStatus(
                        params.row.ruleId,
                        params.row.kindCode,
                        params.row.status
                      );
                    }
                  }
                },
                [
                  h(
                    "Button",
                    {
                      style: {
                        marginRight: "5px"
                      },
                      props: {
                        type: params.row.status === "1" ? "error" : "primary",
                        size: "small"
                      }
                    },
                    params.row.status === "1" ? "停用" : "启用"
                  )
                ]
              ),
              h(
                "Poptip",
                {
                  props: {
                    confirm: true,
                    title: "您确定要删除这条数据吗?",
                    transfer: true
                  },
                  on: {
                    "on-ok": () => {
                      self.del(params.row.ruleId);
                    }
                  }
                },
                [
                  h(
                    "Button",
                    {
                      style: {
                        marginRight: "5px"
                      },
                      props: { type: "error", size: "small" }
                    },
                    "删除"
                  )
                ]
              ),
              h(
                "Button",
                {
                  props: { type: "primary", size: "small" },
                  on: {
                    click() {
                      if(params.row.kindCode == 20) {
                        self.$router.push("config/" + params.row.kindCode);
                      } else {
                        self.$router.push("config/" + params.row.ruleId);
                      }
                    }
                  }
                },
                "查看详情"
              )
            ]);
          }
        }
      ],
      tableData: []
    };
  },
  mounted() {
    this.fetchListStart();
  },
  methods: {
    getVal(expression) {
      let self = this;
      eval(expression);
    },
    fetchListStart() {
      let self = this;
      self.page = { ...self.page, ...self.pageModel, pageNo: 1 };
      if (self.page.niandu) {
        self.page.niandu = self.$moment(self.page.niandu).format("YYYY");
      }
      self.fetchList();
    },
    fetchList() {
      let self = this;
      self.loading = true;
      api
        .queryList(self.page)
        .then(data => {
          self.total = data.count || 0;
          self.tableData = data.list || [];
          self.loading = false;
        })
        .catch(error => {
          self.loading = false;
        });
    },
    reset() {
      let self = this;
      Object.keys(self.pageModel).forEach(x => {
        self.pageModel[x] = null;
      });
      self.fetchListStart();
    },
    changePage(pageNum) {
      this.page.pageNo = pageNum;
      this.fetchList();
    },
    del(id) {
      let self = this;
      self.loading = true;
      api
        .del(id)
        .then(data => {
          self.fetchListStart();
        })
        .catch(error => {
          self.loading = false;
        });
    },
    editModal(row) {
      this.visible = true;
      if (row == null) {
        this.obj = {};
      } else {
        this.obj = { ...row };
      }
    },
    save() {
      let self = this;
      self.$refs["obj"].validate(valid => {
        if (valid) {
          self.loading = true;
          self.obj.niandu = self.$moment(self.obj.niandu).format("YYYY");
          let obj = _.omit(self.obj, ["_index", "_rowKey"]);

          api
            .editList(obj)
            .then(data => {
              self.visible = false;
              self.fetchListStart();
            })
            .catch(() => {
              self.loading = false;
            });
        }
      });
    },
    cancel() {
      this.loading = false;
      this.visible = false;
      this.$refs["obj"].resetFields();
    },
    // 启用/停用 任务
    updateStatus(id, kindCode, status) {
      let self = this;
      self.loading = true;
      api
        .updateStatus({ id, kindCode, status })
        .then(data => {
          self.fetchListStart();
        })
        .catch(error => {
          self.loading = false;
        });
    }
  }
};
</script>

